.magicButton{
  height: 300px;
  width: 100%;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  --elastic: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --x: 0px;
  --y: 0px;
  --t: rgba(255, 255, 255, 0.001);
  --lightest: #f897d5;
  --light: #f567c2;
  --dark: #755ad0;
  --darkest: #1a2a6c;
  --width: 296px;
  --height: 145.5px;
  overflow: hidden;
  .inner {
    display: inline-block;
    position: relative;
    pointer-events: all;
    z-index: 2;
    cursor: pointer;
    box-shadow: 0 0 0 500vmin #fff;
  }
  .inner:hover {
    &:active {
      &:before {
        // background-size: 35% 60%, 100% 100%, 100%;
      }
    }
    &:before {
      filter: blur(2px) brightness(1);
      background-size: 0px 0px, 100% 100%, 100%;
      transition: transform 0.5s var(--elastic),
        background-size 0.25s ease-in-out;
    }
  }
  .inner:before {
    content: "";
    position: absolute;
    width: 200%;
    height: 200%;
    top: 0;
    left: 0;
    filter: blur(2px) brightness(0);
    background: radial-gradient(
        ellipse at center,
        rgba(0, 0, 0, 0.25) 0%,
        var(--t) 20%
      ),
      radial-gradient(
        circle at center,
        var(--lightest),
        var(--light) 5%,
        var(--dark) 30%,
        var(--darkest) 50%
      ),
      var(--darkest);
    background-size: 0px 0px, 0px 0px, 100%;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    opacity: 1;
    mix-blend-mode: lighten;
    z-index: 2;
    transition: transform 0.5s var(--elastic), background-size 0.25s ease-in-out,
      filter 0.5s ease-in-out;
    transform: translate(calc(var(--x) - 50%), calc(var(--y) - 50%));
    pointer-events: none;
  }
  button {
    padding: 56px 96px;
    border: none;
    font-size: 24px;
    position: relative;
    background: transparent;
    color: #fff;
    z-index: 2;
    cursor: pointer;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-shadow: clamp(-8px, calc((var(--width) / 2 - var(--x)) / 8), 8px)
      clamp(-8px, calc((var(--height) / 2 - var(--y)) / 8), 8px) 12px
      rgba(0, 0, 0, 0);
    transition: text-shadow 500ms var(--elastic);
    &:hover {
      --shadow: max(
        calc(
          (var(--width) / 2 - var(--x)) / 8 +
            ((var(--height) / 2 - var(--y)) / 3)
        ),
        calc(
          (
              ((var(--width) / 2 - var(--x)) / 8) +
                ((var(--height) / 2 - var(--y)) / 3)
            ) * -1
        ),
        5px
      );
      text-shadow: clamp(-6px, calc((var(--width) / 2 - var(--x)) / 12), 6px)
        clamp(-4px, calc((var(--height) / 2 - var(--y)) / 16), 4px)
        var(--shadow) #000;
    }
    &:hover ~ .blob {
      &:before {
        transition: transform 500ms var(--elastic),
          box-shadow 1000ms var(--elastic);
        transform: translate(
            clamp(5%, calc(var(--x) - 50%), 550%),
            clamp(16px, calc(var(--y) - 50%), 80px)
          )
          scale(1.25);
        box-shadow: 0 0 0 0.8px #fff, 0 -96px 0 20px #fff,
          0 96px 0 20px #fff;
      }
    }
    &:active {
      cursor: grab;
    }
    &:active:hover ~ .blob {
      &:before {
        box-shadow: 0 0 0 0 #fff, 0 -80px 0 28px #fff,
          0 80px 0 28px #fff;
        transition: transform 500ms var(--elastic),
          box-shadow 500ms var(--elastic);
        transform: translate(
            clamp(5%, calc(var(--x) - 50%), 550%),
            clamp(calc(50% + 16px), calc(var(--y) - 50%), calc(50% + 24px))
          )
          scale(1);
      }
    }
  }
  .blob {
    position: absolute;
    pointer-events: none;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: #fff;
    filter: blur(12px) contrast(25);
    z-index: 1;
    &:before,
    &:after {
      content: "";
      position: absolute;
      background: $bgColor;
    }
    &:before {
      width: 15%;
      height: auto;
      z-index: 2;
      transition: transform 750ms var(--elastic),
        box-shadow 500ms var(--elastic);
      aspect-ratio: 1/1;
      box-shadow: 0 0 0 12px #fff, 0 -128px 0 -32px #fff, 0 128px 0 -32px #fff;
      left: 0;
      top: 0;
      border-radius: 100%;
      transform: translate(
          clamp(10%, calc(var(--x) - 50%), 550%),
          clamp(16px, calc(var(--y) - 50%), 80px)
        )
        scale(0);
    }
    &:after {
      width: calc(100% - 64px);
      height: calc(100% - 64px);
      top: 32px;
      left: 32px;
      border-radius: 80px;
      box-shadow: 0 0 0 128px #fff;
    }
  }
  
}

